{% extends "base.html" %}

{% block title %}课程编辑 - IT课程数据分析系统{% endblock %}

{% block extra_css %}
<style>
    .courses-list {
        display: grid;
        gap: 1.5rem;
    }
    
    .course-card {
        background: white;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .course-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #e0e0e0;
    }
    
    .course-header h3 {
        color: #2c3e50;
        margin: 0;
    }
    
    .course-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }
    
    .info-item {
        background: #f8f9fa;
        padding: 0.75rem;
        border-radius: 4px;
    }
    
    .info-item .label {
        font-size: 0.85rem;
        color: #7f8c8d;
        margin-bottom: 0.25rem;
    }
    
    .info-item .value {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2c3e50;
    }
    
    .editable-section {
        background: #fff9e6;
        padding: 1rem;
        border-radius: 4px;
        border-left: 4px solid #f39c12;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }
    
    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
    }
    
    .form-group textarea {
        min-height: 100px;
        resize: vertical;
    }
</style>
{% endblock %}

{% block content %}
<h2 style="margin-bottom:1.5rem;">课程编辑</h2>

<div id="loading" class="loading">
    <div class="spinner"></div>
    <p>加载中...</p>
</div>

<div id="courses-content" style="display:none;">
    <div class="courses-list" id="courses-list"></div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    async function loadCourses() {
        try {
            const data = await apiRequest('/teacher/my-courses');
            
            if (data.success) {
                const courses = data.data;
                const container = document.getElementById('courses-list');
                
                if (courses.length === 0) {
                    container.innerHTML = '<div class="card"><p style="text-align:center;color:#7f8c8d;padding:2rem;">暂无授课课程</p></div>';
                } else {
                    container.innerHTML = courses.map(course => `
                        <div class="course-card">
                            <div class="course-header">
                                <div>
                                    <h3>${course.name}</h3>
                                    <div style="color:#7f8c8d;font-size:0.9rem;">${course.code} | ${course.semester || '未指定学期'}</div>
                                </div>
                                <button class="btn btn-primary" onclick="editCourse(${course.id})">编辑课程</button>
                            </div>
                            
                            <div class="course-info">
                                <div class="info-item">
                                    <div class="label">学分</div>
                                    <div class="value">${course.credits}</div>
                                </div>
                                <div class="info-item">
                                    <div class="label">院系</div>
                                    <div class="value">${course.department || '-'}</div>
                                </div>
                                <div class="info-item">
                                    <div class="label">选课人数</div>
                                    <div class="value">${course.total_students || 0}</div>
                                </div>
                                <div class="info-item">
                                    <div class="label">最大人数</div>
                                    <div class="value">${course.max_students || '-'}</div>
                                </div>
                            </div>
                            
                            <div class="editable-section" id="edit-section-${course.id}" style="display:none;">
                                <h4 style="margin-bottom:1rem;">可编辑信息</h4>
                                
                                <div class="form-group">
                                    <label>课程描述</label>
                                    <textarea id="description-${course.id}">${course.description || ''}</textarea>
                                </div>
                                
                                <div class="form-group">
                                    <label>最大选课人数</label>
                                    <input type="number" id="max-students-${course.id}" value="${course.max_students || ''}" min="0">
                                </div>
                                
                                <div class="form-group">
                                    <label>课程标签（逗号分隔）</label>
                                    <input type="text" id="tags-${course.id}" value="${course.tags ? course.tags.join(', ') : ''}">
                                </div>
                                
                                <div style="display:flex;gap:1rem;">
                                    <button class="btn btn-primary" onclick="saveCourse(${course.id})">保存修改</button>
                                    <button class="btn btn-danger" onclick="cancelEdit(${course.id})">取消</button>
                                </div>
                            </div>
                        </div>
                    `).join('');
                }
            }
            
            document.getElementById('loading').style.display = 'none';
            document.getElementById('courses-content').style.display = 'block';
            
        } catch (error) {
            showAlert('加载课程失败: ' + error.message, 'error');
            document.getElementById('loading').style.display = 'none';
        }
    }
    
    function editCourse(courseId) {
        const section = document.getElementById(`edit-section-${courseId}`);
        section.style.display = 'block';
        section.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
    
    function cancelEdit(courseId) {
        const section = document.getElementById(`edit-section-${courseId}`);
        section.style.display = 'none';
    }
    
    async function saveCourse(courseId) {
        try {
            const courseData = {
                description: document.getElementById(`description-${courseId}`).value,
                max_students: parseInt(document.getElementById(`max-students-${courseId}`).value) || null,
                tags: document.getElementById(`tags-${courseId}`).value
            };
            
            const data = await apiRequest(`/teacher/courses/${courseId}`, {
                method: 'PUT',
                body: JSON.stringify(courseData)
            });
            
            if (data.success) {
                showAlert('课程更新成功', 'success');
                cancelEdit(courseId);
                loadCourses();
            }
        } catch (error) {
            showAlert('保存失败: ' + error.message, 'error');
        }
    }
    
    window.addEventListener('DOMContentLoaded', () => {
        const userInfo = JSON.parse(localStorage.getItem('user_info') || '{}');
        if (userInfo.role !== 'teacher') {
            showAlert('权限不足', 'error');
            setTimeout(() => window.location.href = '/', 2000);
            return;
        }
        
        loadCourses();
    });
</script>
{% endblock %}






